<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="JeapSik">
    <link rel="icon" href="img/favicon.ico" type="image/gif">
    <title>JeapSik-帮助中心</title>
    <link rel="stylesheet" href="css/all.min.css">
  <style>
    /* 颜色变量和通用样式 */
    :root {
      --primary-color: #4361ee;
      --secondary-color: #3f37c9;
      --dark-color: #1e293b;
      --light-color: #f8fafc;
      --gray-color: #94a3b8;
      --border-radius: 8px;
      --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
      --transition: all 0.3s ease;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
      line-height: 1.6;
      color: var(--dark-color);
      background-color: #f1f5f9;
    }

    /* 帮助容器样式 */
    .help-container {
      display: flex;
      height: 100vh;
      width: 100%;
      margin: 0 auto;
      background: #fff;
      box-shadow: var(--box-shadow);
      border-radius: var(--border-radius);
      overflow: hidden;
    }

    /* 侧边栏样式 */
    .sidebar {
      width: 280px;
      background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
      color: white;
      padding: 2rem 0;
      position: sticky;
      top: 0;
      height: 100vh;
      overflow-y: auto;
      transition: var(--transition);
    }

    .sidebar-header {
      padding: 0 2rem 1.5rem;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      margin-bottom: 1rem;
    }

    .sidebar-header h1 {
      font-size: 1.5rem;
      font-weight: 700;
      margin-bottom: 0.5rem;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .sidebar-header p {
      font-size: 0.95rem;
      opacity: 0.8;
    }

    .search-container {
      position: relative;
      margin-bottom: 1.5rem;
      padding: 0 2rem;
    }

    .search-box {
      width: 100%;
      padding: 0.75rem 1rem 0.75rem 2.5rem;
      border-radius: var(--border-radius);
      border: none;
      background: rgba(255, 255, 255, 0.1);
      color: white;
      font-size: 0.95rem;
      transition: var(--transition);
    }

    .search-box::placeholder {
      color: rgba(255, 255, 255, 0.6);
    }

    .search-box:focus {
      outline: none;
      background: rgba(255, 255, 255, 0.2);
      box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
    }

    .search-icon {
      position: absolute;
      left: 2.7rem;
      top: 50%;
      transform: translateY(-50%);
      color: rgba(255, 255, 255, 0.6);
      font-size: 0.9rem;
      margin-left: 5px;
    }

    .menu {
      list-style: none;
      padding: 0 1.25rem;
    }

    .menu-category {
      color: rgba(255, 255, 255, 0.7);
      font-size: 0.8rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      padding: 0.75rem 1rem;
      margin-top: 0.5rem;
    }

    .menu-item {
      margin-bottom: 0.25rem;
      border-radius: var(--border-radius);
      transition: var(--transition);
    }

    .menu-item a {
      display: flex;
      align-items: center;
      padding: 0.75rem 1rem;
      color: white;
      text-decoration: none;
      font-size: 0.95rem;
      border-radius: var(--border-radius);
      transition: var(--transition);
    }

    .menu-item a:hover {
      background: rgba(255, 255, 255, 0.1);
    }

    .menu-item.active a {
      background: rgba(255, 255, 255, 0.2);
      font-weight: 500;
    }

    /* 主内容区样式 */
    .main-content {
      flex: 1;
      overflow: hidden;
      height: 100vh;
      width: 100%;
      margin: 0 auto;
      position: relative;
    }

    .iframe-container {
      width: 100%;
      height: 100%;
      border: none;
    }

    .iframe-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 1.25rem 2rem;
      background: white;
      border-bottom: 1px solid #e2e8f0;
      position: sticky;
      top: 0;
      z-index: 10;
    }

    .iframe-header h1 {
      font-size: 1.35rem;
      font-weight: 600;
      color: var(--dark-color);
    }

    .breadcrumb {
      display: flex;
      align-items: center;
      font-size: 0.9rem;
      color: var(--gray-color);
      gap: 0.5rem; /* 添加元素间距 */
    }

    .breadcrumb a {
      color: var(--gray-color);
      text-decoration: none;
      transition: var(--transition);
    }

    .breadcrumb a:hover {
      color: var(--primary-color);
    }
  </style>
</head>

<body>
  <div class="help-container">
    <!-- 侧边栏导航 -->
    <div class="sidebar">
      <div class="sidebar-header">
        <h1>帮助中心</h1>
        <p>查找您需要的帮助文档和指南</p>
      </div>

      <div class="search-container">
        <input type="text" class="search-box" placeholder="搜索帮助文档...">
      </div>

      <ul class="menu" id="mainMenu">
        <li class="menu-item active" data-section="product-overview" data-url="help_product-overview.html">
          <a href="#product-overview">产品简介</a>
        </li>
        <li class="menu-item" data-section="platform-architecture" data-url="help_platform-architecture.html">
          <a href="#platform-architecture">平台架构</a>
        </li>

        <li class="menu-item" data-section="installation" data-url="help_installation.html">
          <a href="#installation">安装步骤</a>
        </li>
        <li class="menu-item" data-section="quick-start" data-url="help_quick-start.html">
          <a href="#quick-start">快速入门</a>
        </li>
        <li class="menu-item" data-section="basic-operations" data-url="help_basic-operations.html">
          <a href="#basic-operations">基本操作</a>
        </li>
      </ul>
    </div>

    <!-- 主内容区 -->
    <div class="main-content" id="mainContent">
      <div class="iframe-header">
        <h1 id="iframeTitle">产品简介</h1>
        <div class="breadcrumb">
          <a href="#">帮助中心</a>
          <i class="fa-solid fa-chevron-right"></i>
          <span id="breadcrumbCurrent">产品简介</span>
        </div>
      </div>
      <iframe id="contentFrame" class="iframe-container" src="help_product-overview.html" frameborder="0"></iframe>
    </div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function () {
      // 获取DOM元素
      const menuItems = document.querySelectorAll('.menu-item');
      const contentFrame = document.getElementById('contentFrame');
      const iframeTitle = document.getElementById('iframeTitle');
      const breadcrumbCurrent = document.getElementById('breadcrumbCurrent');
      const searchBox = document.querySelector('.search-box');

      // 处理主菜单点击
      menuItems.forEach(item => {
        item.addEventListener('click', function (e) {
          // 阻止链接默认行为
          if (e.target.tagName === 'A') {
            e.preventDefault();
          }

          // 更新活动菜单项
          menuItems.forEach(i => i.classList.remove('active'));
          this.classList.add('active');

          // 加载对应的iframe内容
          const sectionUrl = this.getAttribute('data-url');
          const sectionName = this.querySelector('a').textContent;

          if (sectionUrl) {
            contentFrame.src = sectionUrl;
            iframeTitle.textContent = sectionName;
            breadcrumbCurrent.textContent = sectionName;
          }

          // 仅在同源时滚动到顶部
          try {
            if (contentFrame.contentWindow && contentFrame.contentWindow.location.origin === window.location.origin) {
              contentFrame.contentWindow.scrollTo(0, 0);
            }
          } catch (error) {
            // 处理跨源错误
            console.error('跨源访问错误:', error);
          }
        });
      });

      // 简单的搜索功能
      searchBox.addEventListener('input', function () {
        const searchTerm = this.value.toLowerCase().trim();

        if (searchTerm.length < 2) {
          // 显示所有菜单项
          menuItems.forEach(item => item.style.display = 'block');
          document.querySelectorAll('.menu-category').forEach(cat => cat.style.display = 'block');
          return;
        }

        let hasResults = false;

        // 搜索菜单项
        menuItems.forEach(item => {
          const text = item.textContent.toLowerCase();
          if (text.includes(searchTerm)) {
            item.style.display = 'block';
            hasResults = true;

            // 显示父类别
            let prev = item.previousElementSibling;
            while (prev && prev.classList.contains('menu-category')) {
              prev.style.display = 'block';
              prev = prev.previousElementSibling;
            }
          } else {
            item.style.display = 'none';
          }
        });

        // 隐藏没有结果的类别
        document.querySelectorAll('.menu-category').forEach(cat => {
          let next = cat.nextElementSibling;
          let shouldShow = false;

          while (next && !next.classList.contains('menu-category')) {
            if (next.style.display !== 'none') {
              shouldShow = true;
              break;
            }
            next = next.nextElementSibling;
          }

          if (!shouldShow) {
            cat.style.display = 'none';
          }
        });
      });
    });
  </script>
</body>
</html>
    